﻿<script setup lang="ts" name="DynamicSegment">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { errorMessage } from '@/utils/message'
const route = useRoute()
const router = useRouter()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)
// params单参数
const value1 = ref('')
const jumpSingleParamPage = () => {
  if (value1.value === '') {
    errorMessage('params参数类型的参数为必填，不能为空')
    return false
  }
  router.push({ path: '/Functions/DynamicSegment/SingleParam/' + value1.value })
}
// params多参数
const value2 = ref('')
const value3 = ref('')
const jumpMultiParamsPage = () => {
  if (value2.value === '' || value3.value === '') {
    errorMessage('params参数类型的参数为必填，不能为空')
    return false
  }
  router.push({ path: '/Functions/DynamicSegment/MultiParams/' + value2.value + '/search/' + value3.value })
}
// query无参数
const value4 = ref('')
const jumpNoQueryPage = () => {
  router.push({ path: '/Functions/DynamicSegment/Query' })
}
// query单参数
const value5 = ref('')
const jumpSingleQueryPage = () => {
  router.push({ path: '/Functions/DynamicSegment/Query', query: { key: value5.value } })
}
// query多参数
const value6 = ref('')
const value7 = ref('')
const jumpMultiQueryPage = () => {
  router.push({ path: '/Functions/DynamicSegment/Query', query: { key1: value6.value, key2: value7.value } })
}
</script>

<template>
  <el-space :size="systemConfig.space" fill alignment="stretch" style="flex-wrap: nowrap">
    <el-row :gutter="systemConfig.space">
      <el-col :xs="24" :sm="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>params参数类型</span>
            </div>
          </template>
          <el-alert title="params参数类型，输入不同参数，可在标签栏同时打开多个对应页面" type="success" :closable="false" show-icon />
          <el-input v-model="value1" placeholder="请输入要传入的参数">
            <template #prepend>单参数</template>
            <template #append>
              <el-button @click="jumpSingleParamPage">打开页面</el-button>
            </template>
          </el-input>
          <el-input class="multi" v-model="value3" placeholder="请输入要传入的第二个参数">
            <template #prepend>
              <span>多参数</span>
              <el-input v-model="value2" placeholder="请输入要传入的第一个参数"></el-input>
              <span>-</span>
            </template>
            <template #append>
              <el-button @click="jumpMultiParamsPage">打开页面</el-button>
            </template>
          </el-input>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>query参数类型</span>
            </div>
          </template>
          <el-alert title="query参数类型，输入不同参数，可在标签栏同时打开多个对应页面" type="success" :closable="false" show-icon />
          <el-input v-model="value4" readonly disabled placeholder="不需要传入参数">
            <template #prepend>无参数</template>
            <template #append>
              <el-button @click="jumpNoQueryPage">打开页面</el-button>
            </template>
          </el-input>
          <el-input v-model="value5" placeholder="请输入要传入的参数">
            <template #prepend>单参数</template>
            <template #append>
              <el-button @click="jumpSingleQueryPage">打开页面</el-button>
            </template>
          </el-input>
          <el-input class="multi" v-model="value7" placeholder="请输入要传入的第二个参数">
            <template #prepend>
              <span>多参数</span>
              <el-input v-model="value6" placeholder="请输入要传入的第一个参数"></el-input>
              <span>-</span>
            </template>
            <template #append>
              <el-button @click="jumpMultiQueryPage">打开页面</el-button>
            </template>
          </el-input>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-row {
  flex: 1;

  .el-col {
    display: flex;

    .el-card {
      flex: 1;

      .el-input {
        margin-top: 20px;
      }

      .multi {
        :deep(.el-input-group__prepend) {
          flex-grow: 1;

          .el-input {
            margin: 0 20px;
          }
        }
      }
    }
  }
}
</style>
